import {messages} from "share/common";
import React from 'react'
import { connect } from 'react-redux'
import {Radio, Alert, Modal, Row, Col, Icon, Card} from 'antd'
const { Meta } = Card;
import noInfo from "images/no-info.png";

class PreviewModal extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
    }
  }

  componentDidMount() {
  }

  render() {
    const {data, visible, onCancel} = this.props;
    return (
      <div>
        <Modal onCancel={onCancel}
               footer={null}
               width={400}
               visible={visible}>
          <div style={{marginTop: 30}}>
            <Row style={{background: '#337ab7'}}>
              <Col span={8}>
                <Icon type="ellipsis" />
                <Icon type="ellipsis" />
                <span style={{fontSize: 9}}>{messages('basic-9.key74')/*中国移动*/}</span>
                <Icon type="wifi" />
              </Col>
              <Col span={8} style={{ textAlign: 'center'}}>10：18</Col>
              <Col span={8} style={{ textAlign: 'right', paddingRight: 5}}>
                <Icon type="unlock" /><Icon type="clock-circle-o" />
              </Col>
            </Row>
            <Row style={{background: '#337ab7', color: 'white', padding: '5px 10px'}}>
              <Col span={8}><Icon type="arrow-left" /></Col>
              <Col span={8} style={{textAlign: 'center'}}>{messages('basic-9.key75')/*全部应用*/}</Col>
            </Row>
            <Row style={{border: '1px solid rgb(243, 243, 243)', padding: '5px 10px'}}>
              <Col span={16} style={{fontSize: 15}}>{messages('basic-9.key76')/*常用功能*/}</Col>
              <Col span={8} style={{textAlign: 'right'}}>
                <a className='default-color-font'>{messages('common.edit')/*编辑*/}</a>
              </Col>
            </Row>
            <Row style={{background: 'rgb(243, 243, 243)', height: 10}}/>
            <div style={{maxHeight: 500, overflowY: 'auto'}}>
              {
                data && data.length && data.map((item, index) => {
                  return(
                    <div key={index}
                         style={{border: '1px solid rgb(243, 243, 243)', padding: '0 10px'}}>
                      <Row type="flex"
                           justify="start"
                           align="middle"
                           style={{padding: 10}}>
                        <Col span={24}>
                    <span style={{color: '#656565', fontSize: 15}}>
                      {item.sectionName}
                    </span>
                        </Col>
                      </Row>
                      <Row gutter={16}>
                        {
                          item.tenantWidgetDetail && item.tenantWidgetDetail.length &&
                          item.tenantWidgetDetail.map((item, index) =>
                            item.enabled &&
                            <Col span={6} key={index} style={{marginBottom: 20}}>
                              <Card bodyStyle={{padding: 0, width: 80}}
                                    bordered={false}
                                    cover={<img alt={messages('basic-9.key77')/*加载失败*/}
                                                src={item.appIcon ? item.appIcon : noInfo}
                                                style={{height: 60, width: 60}}/>}>
                                <Meta description={<div style={{whiteSpace: 'pre-wrap', fontSize: 13, textAlign: 'left', width: 80}}>{item.appName}</div>}/>
                              </Card>
                            </Col>
                          )
                        }
                      </Row>
                    </div>
                  )
                })
              }
            </div>
          </div>
        </Modal>
      </div>
    )
  }
}

PreviewModal.contextTypes ={
  router: React.PropTypes.object
};

PreviewModal.propTypes ={
  data: React.PropTypes.array,
  visible: React.PropTypes.bool,
  onCancel: React.PropTypes.func,
};
PreviewModal.defaultProps = {
  data: [],
  visible: false,
  onCancel: () => {},
};
function mapStateToProps(state) {
  return {
    language: state.main.language,
  }
}

export default connect(mapStateToProps)(PreviewModal)
